<template>
  <div class="comments-container">
    <h3 class="postC">发表评论</h3>
    <hr>
    <!-- maxlength="120" 是设置文本域最多能容纳多少字 -->
    <textarea placeholder="请输入要BB的内容（最多吐槽120字" maxlength="120" v-model="msg"></textarea>
    <!-- 按钮 -->
    <mt-button size="large" type="primary" @click="postCmt">发表评论</mt-button>
    <!-- 评论展示区 -->
    <div class="cmt-container">
      <div class="cmt-item" v-for="(item,i) in CommentData" :key="item.id">
        <div class="cmt-title">第{{i+1}}楼 &nbsp;&nbsp; 用户：{{item.user_name}}&nbsp;&nbsp; 发表时间：{{item.add_time | dateFormat}}</div>
        <div class="cmt-body">{{item.content == '' ? "此用户太懒了,都没有写评论" :item.content}}</div>
      </div>
    </div>
    <mt-button size="large" type="danger" plain @click="getmore">加载更过</mt-button>
  </div>
</template>

<script>
import {Toast} from "mint-ui"
export default {
    data(){
        return{
            pageindex:1,
            CommentData:[],
            msg:""
        }
    },
    props:["id"],
    created() {
        this.getCommentData()
    },
    methods: {
        getCommentData(){
           this.$http.get('api/getcomments/' + this.id+ '?' + 'pageindex=' + this.pageindex).then(result => {
               if(result.body.status==0){
                   this.CommentData =  this.CommentData.concat(result.body.message)
               } else{
                   Toast("获取数据失败")
               }
           })
        },
        getmore(){
            this.pageindex++
            this.getCommentData()
        },
        postCmt(){
          // 在发送请求之前需要进行简单的判断，用户输入的信息不能为 空
          if(this.msg.trim()==""){
            return Toast("评论信息不能为空")
          }
          this.$http.post("api/postcomment/" + this.id,{
            content:this.msg.trim()}).then(result=>{
              if(result.body.status==0){
                var cmt = {
                  user_name:"匿名用户",
                  add_time: Date.now(),
                  content:this.msg.trim()
                }
                this.CommentData.unshift(cmt)
                this.msg="" 
              }
            })
        }
    },
};
</script>
 
 <style lang="less" scoped>
.comments-container {
  .postC {
    font-size: 18px;
  }
  textarea {
    font-size: 14px;
    margin: 0;
  }
  .cmt-container {
    .cmt-title {
      font-size: 13px;
      line-height: 30px;
      background-color: #ccc;
    }
    .cmt-body {
      font-size: 14px;
      text-indent: 2em;
      line-height: 35px;
    }
  }
}
</style>
 